<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        body {
            font-size: 16px;
        }

        td {
            line-height: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <hr>
        <div>
            <img src="../img/4.jpg" height="150px" style="margin-left: 300px">
        </div>
        <input type="text" placeholder="请输入城市名" v-model="city" @keyup.enter="alterCity">
        <button @click="alterCity" class="btn btn-info">确定</button>
        <h2>温馨提示：{{hint}}</h2>
        <table class="table table-hover table-striped">
            <tr>
                <th>日期</th>
                <th>天气</th>
                <th>最高温</th>
                <th>最低温</th>
                <th>风向</th>
            </tr>
            <tr v-for="day in weather">
                <td>{{day.date}}</td>
                <td>{{day.type}}</td>
                <td>{{day.high}}</td>
                <td>{{day.low}}</td>
                <td>{{day.fengxiang}}</td>
            </tr>
        </table>
    </div>
</div>


<script>
    var app = new Vue({
        el: "#app",
        data: {
            city: "",
            weather: [],
            hint: ""
        },
        methods: {
            //改变某城市的天气预报
            alterCity: function () {
                var that = this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(function (response) {
                    that.weather = response.data.data.forecast;
                    that.hint = response.data.data.ganmao;
                }, function (err) {
                })
            }
        }
    })
</script>

</body>
</html>